<template>
<div class="hotSearch">
	<h3 class="title">{{hotsname}}</h3>
	<ul class="list" > 
		<li class="mitem" v-for="(item,index) in list" >{{item.first}}</li>
	</ul>
</div>


</template>

<script>
	export default {
		name:'hotSearch',
		props:['list','hotsname']
		
	}
	
	
</script>

<style lang="scss" scoped="scoped">
@import '../scss/common';
@import '../scss/reset';
 
.hotSearch{
	text-align:left;
	padding: r(30px) r(20px) 0;
	.title{
		font-size: r(24px);
	    line-height: r(24px);
	    color: #666;
	}
}
.list{
	margin: r(20px) 0 r(14px);
	padding: 0;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    .mitem{
    	display: inline-block;
	    height: r(64px);
	    margin-right: r(16px);
	    margin-bottom: r(16px);
	    padding: 0 r(28px);
	    font-size: r(28px);
	    line-height: r(64px);
	    color: #333;
	    border: r(2px) solid;
		border-color: #d3d4da;
		border-radius: r(64px);
    	/*&::after{
    		border: r(2px) solid;
    		border-color: #d3d4da;
    		border-radius: r(64px);
    		
    		position: absolute;
		    z-index: 2;
		    content: "";
		    top: 0;
		    left: 0;
		    pointer-events: none;
		    box-sizing: border-box;
		    width: 100%;
		    height: 100%;
		    -webkit-transform-origin: top left;
		    transform-origin: top left;
		    border: 0 solid rgba(0,0,0,.1);
    	}*/	
    }
}



	
</style>